<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head(~{ :: title}, ~{ :: link}, ~{ ::script},~{::style})">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>商户管理平台-功能添加</title>
    <link rel="stylesheet" th:href="@{/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css}">
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.all.js}"></script>
    <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
    </style>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var MpsFunList=/*[[${MpsFunList}]]*/;
        /*]]>*/
        var setting={
            view:{
                dblClickExpand:false,
                showLine:true
            },
            data:{
                simpleData:{
                    enable:true,
                    idkey:"id",
                    pIdKey:"parent"
                }
            },
            callback:{
                beforeClick:beforeClick,
                onClick:treeOnClick
            }
        };
        function beforeClick(id,node){
            return true;
        }
        function treeOnClick(e,id,node){
            $("#parentSel").val(node.name);
            $("#parent").val(node.id);
            hideTree();
        }
        function onBodyDown(e){
            if (!(event.target.id == "parentSel" || event.target.id == "ParentTreeContent" || $(event.target).parents("#ParentTreeContent").length>0)) {
                hideTree();
            }
        }
        function showTree(){
            var parentObj=$("#parentSel");
            var parentOffset=$("#parentSel").offset();
            $("#ParentTreeContent").css({
                left:parentOffset.left+"px",
                top:parentOffset.top+parentObj.outerHeight()+"px"
            }).slideDown("fast");
            $("body").bind("mousedown",onBodyDown);
        }
        function hideTree(){
            $("#ParentTreeContent").fadeOut("fast");
            $("body").unbind("mousedown",onBodyDown);
        }
        $(function(){
            var zNodes=eval("("+MpsFunList+")");
            $.fn.zTree.init($("#ParentTree"),setting,zNodes);
            $("#parentSel").click(function(){
               showTree();
            });
        });
    </script>
</head>
<body th:replace="layout::body(~{this::section})">
<section class="content-wrapper">
    <section class="content-header">
        <h1>
            功能
            <small>添加</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 乡银保数据运营管理平台</a></li>
            <li class="active">功能添加</li>
        </ol>
    </section>
    <section class="content">
        <div th:if="${respMsg != ''}" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> 操作提示</h4>
            <label th:text="${respMsg}"/>
        </div>
        <form class="form" th:action="@{/MpsFun/Save}" role="form" method="post">
            <div class="form-group">
                <label>功能名称：</label>
                <input type="text" id="name" name="name" class="form-control"/>
            </div>
            <div class="form-group">
                <label>上级功能：</label>
                <input type="text" readonly="readonly" id="parentSel" name="parentSel" class="form-control"/>
                <input type="hidden" id="parent" name="parent"/>
            </div>
            <div class="form-group">
                <label>标题图标：</label>
                <input type="text" id="iconCls" name="iconCls" class="form-control"/>
            </div>
            <div class="form-group">
                <label>功能连接：</label>
                <input type="text" id="href" name="href" class="form-control"/>
            </div>
            <div class="form-group">
                <label>功能备注：</label>
                <textarea id="descr" name="descr" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label>资料排序：</label>
                <input type="number" id="sort" name="sort" value="99999" class="form-control"/>
            </div>
            <div class="form-group">
                <label>资料状态：</label>
                <input type="number" id="status" name="status" value="0" class="form-control"/>
            </div>
            <div class="row">
                <div class="col-md-5"></div>
                <div class="col-md-1">
                    <input type="submit" class="btn btn-block btn-primary" value="保存"/>
                </div>
                <div class="col-md-1">
                    <a class="btn btn-block btn-primary" th:href="@{/MpsFun/goMpsFunList}">返回</a>
                </div>
                <div class="col-md-5"></div>
            </div>
        </form>
        <div id="ParentTreeContent"  style="display: none;position: absolute;">
            <ul id="ParentTree" class="ztree" style="margin-top: 0;width: 200px;"></ul>
        </div>
    </section>

</section>
</body>
</html>